<!--
 * @Author: your name
 * @Date: 2020-08-03 20:05:32
 * @LastEditTime: 2020-08-09 18:20:21
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \H52002-VueMobile-accp\honeybud\src\views\CartList.vue
--> 
<template>
  <div class="cartlist">
    <van-nav-bar title="购物车" size=20 color="#333"  left-arrow @click-left="onClickLeft" />
    <div class="wrapper" id="shopping_cart">
      <section class="cartBox store_guoneiziying" style>
        <div class="tit">
          <label for="brandAllguoneiziying">
            <input
              type="checkbox"
              name="productcheckAll"
              id="brandAllguoneiziying"
              data-storeid="guoneiziying"
              class="check-ipt"
            />
            <i class="check-icon check_icon_new"></i>
            蜜芽国内自营
          </label>
        </div>
         <div class="cl_promotion" data-promotion>
          <div class="items">
            <div class="item item_159645293611677">
              <label for="brand01_159645293611677">
                <div class="div_w">
                  <input
                    type="checkbox"
                    gf="0"
                    name="productcheck"
                    id="brand01_159645293611677"
                    data-midou="0"
                    class="check-ipt"
                    checked
                    cart-sku="5486218"
                    value="159645293611677"
                  />
                  <i class="check-icon"></i>
                  <div class="flex">
                    <div class="flex-img" style="position:relative;">
                      <a href="/item-5486218.html" title="兔头妈妈甄选大师系列自然肤感成长裤NEW" target="_blank">
                      
                        <img
                          src="https://img05.miyabaobei.com/d1/p6/item/54/5486/5486218_normal_4_4f53ce58.jpg"
                        />
                      </a>
                     
                    </div>
                    <div class="flex-else">
                      <h5>兔头妈妈甄选大师系列自然肤感成长裤NEW</h5>
                      
                      <div class="desc it_size" data-size>XXXL 36片</div>
                      
                      <div class="pricebox">
                        <div class="price new">
                          ¥
                          <em>129</em>
                        </div>
                        <div class="numbox" buy_type="0" data-size>
                          <span class="sub dp_jian disabled" data-fm="cart_home">-</span>
                          <input
                            type="num"
                            name="count"
                            class="dp_num"
                            maxlength="2"
                            value="1"
                            rowid="5486218"
                            warehouse_id="3364"
                            readonly
                          />
                          <span class="add dp_jia" data-itemstock="99" data-fm="cart_home">+</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                
              </label>
              <span></span>
             
            </div>
          </div>
        </div> 
      </section>

      <div class="clearAll mar25">
        <a id="delete_selected_goods" href="javascript:void(0);">删除选择商品</a>
        <a id="delete_invalid_goods" href="javascript:void(0);">清除无效商品</a>
      </div>

      <div class="paybar box-flex-f posi_z">
        <div class=" lt">
          <label for="brandAllTotal">
            <input type="checkbox" name="brandAllTotal" id="brandAllTotal" class="check-ipt" />
            <i class="check-icon check_icon_new"></i>
            全选
          </label>
        </div>
        <div class=" md newCart">
          <div class="totalprice">
            <div class>
              总计(不含税)：
              <span class="price">
                ￥
                <span class="newCart_settle_amount">129</span>
              </span>
            </div>
            <div class="yh" style="display: none; ">
              <span class="thrift_price"></span>
              <span class="taxes_price"></span>
            </div>
          </div>
          <a class="box-flex-c rt btnJieSuan">
            结算
            <span>
              (
              <b style="style-weight:normal;">1</b>)
            </span>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    onClickLeft() {
      this.$router.push("/home/index");
    }
  }
};
</script>

<style lang="stylus" scoped>
.cartlist{
    height  100%
    background: #f6f6f6;
}
  .van-nav-bar .van-icon {
      color: #333 !important;
      z-index 99
  }
  .van-nav-bar__arrow {
      font-size: 20px;
  }
  .wrapper {
    margin: 0 auto;
    max-width: 640px;
    overflow: hidden;
  }
  .cartBox {
    margin: .1rem;
    background-color: #fff;
    border-radius: .13333rem;
    overflow: hidden;
  }
  .cartBox .tit {
    position: relative;
    line-height: 1;
    margin-top .2rem
  }
  .cartBox .tit label {
    display: block;
    padding: 0.1rem 0.1rem 0.1rem 0.4rem;
    height: 0.25rem;
    line-height: 0.054667rem;
    margin-right: 0.8rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .cartBox .tit .check-icon {
    position: absolute;
    top: 50%;
    left: 0.1rem;
    transform: translateY(-50%);
  }
  .check-ipt {
    display: none;
  }
  .check-ipt:checked+.check-icon {
    background: url(https://img.miyabaobei.com/d1/p6/2020/06/22/32/bf/32bf911de92007cec70640f67b290a53189282317.png) no-repeat;
    background-size: 100%;
    background-color: #ea4141;
    border-color: #ea4141;
  }
  .check-ipt+.check-icon {
    border-radius: 50%;
    position: relative;
    display: inline-block;
    width: 0.2rem;
    height: 0.2rem;
    border: 1px solid #ebebeb;
  }
  .items .item {
    padding: 0.3rem 0;
    position: relative;
  }
  .items label {
    position: relative;
    display: block;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    z-index: 2;
  }
  .items label .div_w {
    padding: 0 .26667rem;
  }
  .check-ipt {
    display: none;
  }
  .items label .check-icon {
    position: absolute;
    top: .4rem;
    left: 10px;
  }
  .check-ipt+.check-icon {
    border-radius: 50%;
    position: relative;
    display: inline-block;
    width: .2rem;
    height: .2rem;
    border: 1px solid #ebebeb;
  }
  .items .flex {
    display: flex;
    margin-left: .08rem;
  }
  .items .flex-img {
    width: 0.85rem;
    height: 0.85rem;
    flex-shrink: 0;
    overflow: hidden;
  }
  a {
    color: #333;
    -webkit-tap-highlight-color: transparent;
  }
  .items .flex-img img {
    width: 100%;
  }
  .items .flex-else {
    margin-left: .1rem;
    min-height: .26667rem;
    flex: 1;
  }
  .items .flex-else h5 {
    position: relative;
    width: 100%;
    font-weight: 400;
    font-size: .13rem;
    display: flex;
    line-clamp: 2;
    box-orient: vertical;
    overflow: hidden;
  }
  .items .flex-else .desc {
    color: #999;
    margin-bottom: .06rem;
    min-height: .13333rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 0.8rem;
    display: block;
  }
  .items .flex-else .pricebox {
    position: relative;
    min-height: 0.3rem;
  }
  .items .flex-else .price {
    font-family: "Helvetica Neue",Helvetica,STHeiTi,Arial,sans-serif;
    font-size: .08rem;
    color: #333;
    width: 0.5rem;
    float: left;
  }
  .items .flex-else .price em {
    font-style: normal;
    font-size: .2rem;
  }
  .items .flex-else .numbox {
    float: left;
    border: 1px solid #ddd;
    overflow: hidden;
    position: absolute;
    right: -24px;
    top: .02rem;
  }
  .items .flex-else .numbox input {
    width: 1.28rem;
    border: 1px solid #ddd;
    border-width: 0 .5px;
    border-radius: 0;
  }
  .items .flex-else .numbox input, .items .flex-else .numbox span {
    float: left;
    height: 0.23rem;
    line-height: 0.23rem;
    text-align: center;
  }
  .items .flex-else .numbox span.disabled {
    color: #ccc;
  }
  .items .flex-else .numbox input {
    width: 0.3rem;
    border: 1px solid #ddd;
    border-width: 0 .5px;
    border-radius: 0;
  }
  .items .flex-else .numbox span {
    width: .4rem;
    font-size: 0.21rem;
    color: #666;
  }
  .clearAll {
    padding: .04rem 0;
    text-align: center;
    background-color: #fbfbfb;
    font-size: .04rem;
    margin-bottom: 0.2rem;
  }
  .clearAll>a {
    padding: .16rem 0 .16rem .42667rem;
    background: url(https://img.miyabaobei.com/d1/p6/2020/06/22/59/42/594289e489b4f33db94411dda2496c76084069205.png) left center no-repeat;
    -webkit-background-size: .2rem auto;
    background-size: .2rem auto;
    color: #666;
    margin-right: .2rem;
  }
  .paybar {
    position: fixed;
    width: 100%;
    max-width: 640px;
    bottom: 0px;
    height: 0.51rem;
    font-size: .04rem;
    background-color: #fff;
    vertical-align: middle;
    text-align: center;
    z-index: 100;
  }
  .paybar::before {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 0;
    border-top: .5px solid #e3e5e9;
    transform: scaleY(.5);
    -webkit-transform: scaleY(.5);
  }
  .paybar .lt {
    max-width: 0.35rem;
    margin-top: 16px;
    margin-left: 40px;
  }
  .box-flex-c {
    display: block
    flex: 1;
    flex-basis: 0;
  }
  .paybar .lt .check-icon {
    left: 0.2rem;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
  }
  .check-ipt:checked+.check-icon {
    background: url(https://img.miyabaobei.com/d1/p6/2020/06/22/32/bf/32bf911de92007cec70640f67b290a53189282317.png) no-repeat;
    background-size: 100%;
    background-color: #ea4141;
    border-color: #ea4141;
  }
  .paybar .totalprice {
    color: #333;
    font-size: 0.15rem;
    text-align: right;
    height: 0.15rem;
    width: 2rem;
    position: absolute;
    bottom: 22px;
    left: 61px;
  }
  .paybar .totalprice .price {
    color: #ea4141;
  }
  .paybar .totalprice .price span {
    font-size: .048rem;
  }
  .paybar .btnJieSuan {
    cursor: pointer;
  }
  .paybar .rt {
        position: absolute;
    width: 1.09rem;
    line-height: 0.51rem;
    color: #fff;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: #ea4141;
    font-size: 0.18rem;
  }
  b, strong {
    font-weight: 700;
  }
</style>
